<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/fronted/register.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <style>
        .pl60 {
            padding-left: 60px;
        }
        .mgt20 {
            margin-top: 20px;
        }
        .common-index {
            height: 24px;
            width: 24px;
            display: inline-block;
        }
        .active-index {
            background: url("images/reg-icon.png") no-repeat 0 0;
        }
        .step-index {
            line-height: 24px;
            font-weight: 700;
            color: #ffffff;
            background: url("images/reg-icon.png") no-repeat 0 -200px;
        }
        .active {
            background-color: #21cb91;
        }
        div.process-label p.active {
            background-color: white;
            color: #21cb91;
        }
        .common-pointer {
            height: 10px;
            width: 140px;
            position: absolute;
        }
        div.pointer {
            background: url("images/reg-icon.png") no-repeat 0 -100px;
        }
        .active-pointer {
            background: url("images/reg-icon.png") no-repeat 0 -130px;
        }
        .line-1 {
            top: 7px;
            left: 73px;
        }
        .line-2 {
            top: 7px;
            left: 241px;
        }
        div.process-label {
            width: 100px;
            text-align: center;
        }
        div.other-label {
            margin-left: 69px;
        }
        div.process-label p{
            margin-bottom: 0;
            padding-top: 15px;
        }
        h3.success-text{
            color: #21cb91;
            text-align: center;
        }
        .username-success {
            color: forestgreen;
            position: absolute;
            top: 34px;
            right: 6px;
            display: none;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-push-3 col-xs-12 pl60">
                <!-- 控制注册导航 -->
                <div style="display: flex; flex-direction: row; position: relative;">
                    <div class="process-label">
                        <span class="common-index step-index">1</span>
                        <p class="active">验证手机号</p>
                    </div>
                    <div class="common-pointer pointer line-1"></div>
                    <div class="process-label other-label">
                        <span class="common-index step-index">2</span>
                        <p class="info-text">填写账号信息</p>
                    </div>
                    <div class="common-pointer pointer line-2"></div>
                    <div class="process-label other-label">
                        <span class="common-index step-index">3</span>
                        <p class="info-text">注册成功</p>
                    </div>
                </div>
            </div>
        </div>
        <div  id="phonePanel" class="row mgt20">
            <!-- 电话的form表单 --->
            <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
                <form onsubmit="javascript: return false;">
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="text" autocomplete="off" id="phone" class="form-control" onblur="checkPhone()">
                        <span id="normPhone" style="color: red"></span>
                    </div>
                    <div class="form-group">
                        <label for="validateCode">验证码</label>
                        <div class="input-group">
                            <input type="text" autocomplete="off" id="validateCode" class="form-control">
                            <!--  cursor: pointer; 将鼠标的形状改为手状。-->
                            <span class="input-group-addon" id="secondCountDown" style="cursor: pointer;" onclick="dateCodeSend()">获取验证码</span>
                        </div>
                        <span id="dateCodeSend" style="color: red"></span>
<!--                        <span id="dateCodeCheck" style="color: red"></span>-->
                    </div>
                    <div>
                        <button onclick="gotoNext()" class="btn btn-block btn-danger">下一步</button>
                    </div>
                </form>
            </div>
        </div>
        <div id="otherInfoPanel"class="row mgt20" style="display: none;">
            <!-- 其他信息的form表单 -->
            <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
                <form id="remainInfoForm" name="remainInfoForm" onsubmit="javascript: return false;">
                    <div class="form-group" style="position: relative;">
                        <label for="username">用户名(必须以字母开头,中间不能包含特殊符号(!、@、#、$、%、&、*(、)): </label>
                        <input type="text" autocomplete="off" class="form-control" name="uName" id="username" onblur="checkUserNorm()">
                        <span id="msgUsername" style="color: red"></span></br>
                        <span id="normUsername" style="color: red"></span>
                        <i id="success-icon" class="fa fa-check username-success"></i>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="uPassword" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="repassword">重复密码</label>
                        <input type="password" id="repassword" name="repassword" class="form-control" onblur="checkPassword()">
                        <span id="normPassword" style="color: red"></span>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="text" autocomplete="off" name="uEmail" id="email" class="form-control" onblur="checkEmail()">
                        <span id="normEmail" style="color: red"></span>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div>
                            <label>
                                <input type="radio" checked name="uSex" value="F"> 女
                            </label>
                            <label>
                                <input type="radio" name="uSex" value="M"> 男
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <button onclick="submitToRegister()" class="btn btn-block btn-danger">立即注册</button>
                        <span id="register" style="color: red"></span>
                    </div>
                </form>
            </div>
        </div>
        <div id="successPanel" class="row mgt20" style="display: none;">
            <h3 class="success-text">恭喜你, 注册成功!</h3>
            <p style="text-align: center;" id="gotoText">页面将在 <span style="color: red;" id="countdownSecond">5</span>s 之后, 返回上一次访问的页面. </p>
        </div>
    </div>
</body>
<script>
    // 在电话面板，点击下一步的按钮
    function gotoNext() {
        var validateCode=document.getElementById("validateCode").value.trim()

        var vdc;

        if(window.XMLHttpRequest){
            vdc=new XMLHttpRequest();
        }else{
            vdc=new ActiveXObject("Microsoft.XMLHTTP");
        }
        vdc.onreadystatechange= function(){
            // alert(vdc.responseText)
            if(vdc.responseText=="dateCodeUsable"){
                document.getElementById("dateCodeSend").style.display="none"
                RegisterPanel.changePhoneLabel();
            }else{
                document.getElementById("dateCodeSend").style.display="inline"
                document.getElementById("dateCodeSend").innerText="验证码错误"
            }
        }
        vdc.open("GET","/front/checkDateCode?dateCode="+validateCode)
        vdc.send()
    }

    // 点击 "立即注册" 按钮
    function submitToRegister() {
        var remainInfoForm = $("#remainInfoForm").serialize();//将表单实例化，下面传参要用
        var uPhone=document.getElementById("phone").value.trim()
        $.ajax({
            url : '/front/register',
            type : "POST",
            data : remainInfoForm+"&uPhone="+uPhone,//传递数据直接将上面定义的表单写上，后面拼接要传递的参数名及参数
            dataType : 'text',
            success : function(data) {
                if(data=="registerSuccess"){
                    RegisterPanel.changeOtherInfoLabel();
                    setInterval(go, 1000);
                }else {
                    document.getElementById("register").innerText="注册失败！请检查注册信息是否规范，再重新输入";
                    RegisterPanel.changePhoneLabel();
                }
            }
        });

        var x = 5; //利用了全局变量来执行
        function go() {
            x--;
            if (x > 0) {
                document.getElementById("countdownSecond").innerHTML = x; //每次设置的x的值都不一样了。
                RegisterPanel.changeOtherInfoLabel();
            } else {
                //回退但没刷新
                // window.history.back();
                //回退并刷新
                window.location.href = document.referrer;
                RegisterPanel.changeOtherInfoLabel();
            }
        }
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

    function checkUserNorm() {

        var uName= document.getElementById("username").value.trim();

        var cun;
        if(window.XMLHttpRequest){
            cun=new XMLHttpRequest();
        }else{
            cun=new ActiveXObject("Microsoft.XMLHTTP");
        }
        cun.onreadystatechange=function () {
            if(cun.responseText=="false-exist"){
                document.getElementById("normUsername").style.display="inline"
                document.getElementById("msgUsername").style.display="inline"
                document.getElementById("normUsername").innerText="用户名不符合规范！请重新输入";
                document.getElementById("msgUsername").innerText="用户名已存在！请重新输入";
            }else if(cun.responseText=="true-exist"){
                document.getElementById("msgUsername").style.display="inline"
                document.getElementById("msgUsername").innerText="用户名已存在！请重新输入";
            }else if(cun.responseText=="false-inexistence"){
                document.getElementById("normUsername").style.display="inline"
                document.getElementById("normUsername").innerText="用户名不符合规范！请重新输入";
            }else {
                document.getElementById("normUsername").style.display="none"
                document.getElementById("msgUsername").style.display="none"
            }
        }
        cun.open("GET","/front/checkUserNorm?uName="+uName)
        cun.send();
    }

    function checkPassword() {
        var password= document.getElementById("password").value.trim();
        var repassword= document.getElementById("repassword").value.trim();

        var pass;

        if(window.XMLHttpRequest){
            pass=new XMLHttpRequest();
        }else{
            pass=new ActiveXObject("Microsoft.XMLHTTP");
        }

        pass.onreadystatechange= function(){
            if(pass.responseText=="passwordUnable"){
                document.getElementById("normPassword").style.display="inline"
                document.getElementById("normPassword").innerText="两次密码输入值不同！请重新输入"
            }else{
                document.getElementById("normPassword").style.display="none"
            }
        }

        pass.open("GET","/front/checkPassword?password="+password+"&"+"repassword="+repassword)
        pass.send()
    }

    function checkEmail() {
        var email=document.getElementById("email").value.trim();

        var em;
        if(window.XMLHttpRequest){
            em=new XMLHttpRequest();
        }else{
            em=new ActiveXObject("Microsoft.XMLHTTP");
        }

        em.onreadystatechange=function(){
            if(em.responseText=="emailUnable"){
                document.getElementById("normEmail").style.display="inline"
                document.getElementById("normEmail").innerText="邮箱不可用！请重新输入";
            }else {
                document.getElementById("normEmail").style.display="none"
            }
        }

        em.open("GET","/front/checkEmail?email="+email);
        em.send();
    }

    function checkPhone() {
        var phone=document.getElementById("phone").value.trim();

        var ph;
        if(window.XMLHttpRequest){
            ph=new XMLHttpRequest();
        }else{
            ph=new ActiveXObject("Microsoft.XMLHTTP");
        }

        ph.onreadystatechange=function(){
            if(ph.responseText=="phoneUnable"){
                document.getElementById("normPhone").style.display="inline"
                document.getElementById("normPhone").innerText="电话号码不规范！请重新输入";
            }else {
                document.getElementById("normPhone").style.display="none"
            }
        }

        ph.open("GET","/front/checkPhone?phone="+phone);
        ph.send();
    }



    function dateCodeSend() {
        var phone=document.getElementById("phone").value.trim();

        var dcs;
        if(window.XMLHttpRequest){
            dcs=new XMLHttpRequest();
        }else{
            dcs=new ActiveXObject("Microsoft.XMLHTTP");
        }
        dcs.onreadystatechange=function(){
            if(dcs.responseText=="phoneUnable"){
                document.getElementById("dateCodeSend").style.display="inline"
                document.getElementById("dateCodeSend").innerText="验证码发送失败！请检查电话号码是否符合规范";
            }else{

                document.getElementById("dateCodeSend").style.display="inline"
                document.getElementById("dateCodeSend").innerText="验证码已经发送！请注意查收";
            }
        }
        dcs.open("GET","/front/dateCodeSend?phone="+phone);
        dcs.send();
    }
</script>
</html>